<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Raft 演示</title>
    <link href="../w/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../w/static/bootstrap/css/bootstrap-slider.css" rel="stylesheet">
    <script src="../w/static/jquery/jquery-1.7.2.min.js"></script>
    <script src="../w/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="../w/static/bootstrap/js/bootstrap-slider.js"></script>
    <script src="../w/static/bootstrap/js/bootstrap-contextmenu.js"></script>
    <script src="util.js"></script>
    <script src="raft.js"></script>
    <script src="state.js"></script>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row" style="margin-top: 20px">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="border: 0px solid black" width="745" height="400">
          <defs>
            <marker id="TriangleOutM" orient="auto" refX="0.0" refY="0.0" style="overflow:visible">
              <path d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z" transform="scale(0.4)" />
            </marker>
            <marker id="TriangleOutS-RequestVote" orient="auto" refX="0.0" refY="0.0" style="overflow:visible">
              <path d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z" transform="scale(0.3)" class="message RequestVote" />
            </marker>
            <marker id="TriangleOutS-AppendEntries" orient="auto" refX="0.0" refY="0.0" style="overflow:visible">
              <path d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z" transform="scale(0.3)" class="message AppendEntries" />
            </marker>
          </defs>
          <circle id="ring" />
          <g id="pause" class="resumed">
            <rect width="1" height="3" x="-1.25" y="-1.5" />
            <rect width="1" height="3" x=".25"   y="-1.5" />
          </g>
          <g id="messages"></g>
          <g id="servers"></g>
          <g class="logs"></g>
        </svg>
      </div>
      <div class="row" style="margin-top: 20px">
        <a id="time-button" href="#"><span id="time-icon" class="glyphicon glyphicon-time" style="font-size: 24pt; vertical-align: middle" data-toggle="tooltip" title="时间线；单击可暂停/播放 Timeline; click to pause/play"></span></a>
        &nbsp;时间&nbsp;
        <input id="time" style="width: 650px" data-slider-id='timeSlider' type="text" data-slider-min="0" data-slider-max="1000" data-slider-step="1" data-slider-value="0" />
      </div>
      <div class="row" style="margin-top: 20px">
        <span id="speed-icon" class="glyphicon glyphicon-dashboard" style="font-size: 24pt; vertical-align: middle" data-toggle="tooltip" title="速度模拟-Simulation speed"></span>
        &nbsp;速度&nbsp;
        <input id="speed" style="width: 650px"  data-slider-id='speedSlider' type="text" data-slider-min="0" data-slider-max="3" data-slider-step=".01" data-slider-value="2" />
      </div>
    </div>

    <div id="modal-details" class="modal" tabindex="-1" data-keyboard="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div id="modal-help" class="modal" tabindex="-1" data-keyboard="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Keyboard shortcuts</h4>
          </div>
          <div class="modal-body">
            <table class="table">
              <tr>
                <td><kbd>&nbsp;</kbd> / <kbd>.</kbd></td>
                <td>Pause/unpause</td>
              </tr>
              <tr>
                <td><kbd>?</kbd></td>
                <td>Help</td>
              </tr>
              <tr>
                <td><kbd>C</kbd></td>
                <td>Submit client request to leader of highest term, if any</td>
              </tr>
              <tr>
                <td><kbd>R</kbd></td>
                <td>Restart leader of highest term, if any</td>
              </tr>
              <tr>
                <td><kbd>T</kbd></td>
                <td>Adjust election timers to avoid a split vote</td>
              </tr>
              <tr>
                <td><kbd>A</kbd></td>
                <td>Align election timers to encourage a split vote</td>
              </tr>
              <tr>
                <td><kbd>L</kbd></td>
                <td>Set up log replication start scenario</td>
              </tr>
              <tr>
                <td><kbd>B</kbd></td>
                <td>Resume all servers</td>
              </tr>
              <tr>
                <td><kbd>F</kbd></td>
                <td>Fork playback, discarding future</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div id="modal-section" class="modal" tabindex="-1" data-keyboard="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div class="text-center" style="padding: 200px 0">
              <h1></h1>
              <h2></h2>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="context-menu">
      <ul class="dropdown-menu" role="menu">
      </ul>
    </div>

  </body>
</html>
